<template>
 <div>
     <a-modal v-model:open="localVisible" width="1000px" title="新增弹框" @ok="handleOk" :footer="null">
        <a-divider />
        <div>
            <a-steps :current="current" :items="items"></a-steps>

            <div class="steps-content">
                <ViewPartOne v-if="current==0"></ViewPartOne>
                <ViewSecond v-if="current==1"></ViewSecond>
                <ViewThrid v-if="current==2"></ViewThrid>
            </div>


            <div class="steps-action">
            <a-button @click="handleOk">取消</a-button>
            <a-button v-if="current < steps.length - 1" type="primary" @click="next" style="margin-left: 8px">下一步</a-button>
            <a-button
                v-if="current == steps.length - 1"
                type="primary"
                style="margin-left: 8px"
            >
                完成
            </a-button>
            <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">上一步</a-button>
            </div>
        </div>
    </a-modal>
 </div>
</template>
<script setup lang="ts">
import {ref,watch} from 'vue';
import ViewPartOne from './ViewPartOne.vue';
import ViewSecond from './ViewSecond.vue';
import ViewThrid from './ViewThrid.vue';

const props = defineProps<{
    visible: boolean
}>()
const emit = defineEmits<
{(e: 'update:visible', value: boolean): void}
>()
const localVisible = ref(props.visible);
watch(
  () => props.visible,
  (newVal) => {
    localVisible.value = newVal;
  },
);
watch(
  localVisible, 
  (newVal) => {
    emit('update:visible', newVal); // 本地v-model修改后，立即通知父组件
  }
);
// 切换visible状态并通知父组件
const handleOk = () => {
  localVisible.value = !localVisible.value;
};


const current = ref<number>(0);
const next = () => {
  if (current.value < steps.length - 1) { // 确保不超过最后一步
    current.value++;
  }
};
const prev = () => {
  if (current.value > 0) { // 确保不小于第一步
    current.value--;
  }
};
interface stepsData {
    title: string,
    content: string
}
const steps:stepsData[] = [
  {
    title: 'First',
    content: 'First-content',
  },
  {
    title: 'Second',
    content: 'Second-content',
  },
  {
    title: 'Last',
    content: 'Last-content',
  },
];
const items = steps.map(item => ({ key: item.title, title: item.title }));

</script>

<style>
.steps-content {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  background-color: #fafafa;
  min-height: 200px;
  text-align: center;
  padding-top: 80px;
}

.steps-action {
  margin-top: 24px;
  text-align: center;
}

[data-theme='dark'] .steps-content {
  background-color: #2f2f2f;
  border: 1px dashed #404040;
}
</style>